<template>
  <div class="form-buttons" :class="isFixed ? 'fixed-button' : ''">
    <slot name="prepend"></slot>
    <el-button v-if="showCancelButton" :size="size" @click="cancel">{{ cancelText }}</el-button>
    <el-button v-if="showSubmitButton" :size="size" type="primary" :loading.sync="loading" @click="submit">{{
      submitText
    }}</el-button>
    <slot></slot>
  </div>
</template>
<script>
export default {
  props: {
    size: {
      type: String,
      default: 'small',
    },
    cancelText: {
      type: String,
      default() {
        return '取消';
      },
    },
    submitText: {
      type: String,
      default() {
        return '保存';
      },
    },
    isFixed: {
      type: Boolean,
      default: false,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    showCancelButton: {
      type: Boolean,
      default: true,
    },
    showSubmitButton: {
      type: Boolean,
      default: true,
    },
  },
  methods: {
    cancel() {
      this.$emit('cancel');
    },
    submit() {
      this.$emit('submit');
    },
  },
};
</script>
<style lang="scss" scoped>
.form-buttons {
  zoom: 1;
  text-align: right;
}
.form-buttons:after {
  clear: both;
  content: '.';
  display: block;
  height: 0;
  visibility: hidden;
}
.fixed-button {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 10;
  width: calc(100% - 160px);
  background: #fff;
  line-height: 52px;
  height: 52px;
  padding: 0 20px;
  border-top: 1px solid #e8e8e8;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.03);
}
.hideSidebar {
  .fixed-button {
    width: calc(100% - 60px);
  }
}
</style>
